<template>

	<view :class="slider ? 'offcanvas-container' : '' " @click.self="closeOff">
		<view class="offcanvas-menu" :class="slider ? 'active': ''" id="offcanvas-menu">
			<!-- 头像区域 -->
			<view class="profile-card text-center">
				<view class="profile-card__image space-mb--10">
					<image src="../../static/img/profile.jpg" mode="widthFix" class="image-fluid" alt="">
				</view>
				<view class="profile-card__content">
					<view class="name">Don Normane <text class="id">ID MD 4350</text></view>
				</view>
			</view>
			<!-- 列表区域 -->
			<view class="offcanvas-navigation-wrapper space-mt--40">
				<view class="offcanvas-navigation">
					<view>
						<image src="../../static/img/icons/notification.svg" class="injectable" alt="">
							<navigator href="/">消息</navigator>
					</view>
					<view>
						<image src="../../static/img/icons/product.svg" class="injectable" alt="">
							<navigator href="/">全部商品</navigator>
					</view>
					<view>
						<image src="../../static/img/icons/cart-two.svg" class="injectable" alt="">
							<navigator href="/">我的订单</navigator>
					</view>
					<view>
						<image src="../../static/img/icons/wishlist.svg" class="injectable" alt="">
							<navigator href="/">收藏</navigator>
					</view>
					<view>
						<image src="../../static/img/icons/gear-two.svg" class="injectable" alt="">
							<navigator href="/">设置</navigator>
					</view>
					<view>
						<image src="../../static/img/icons/profile.svg" class="injectable" alt="">
							<navigator href="/">关于我们</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		// 得到overlay的控制状态
		computed: {
			...mapState(['slider'])
		},
		methods: {
			...mapMutations(['changeSlider']),
			closeOff () {
				if (this.slider) {
					// 开启的时候点击遮罩层就会触发关闭	
					this.changeSlider()
				}
			}
		}
	}
</script>

<style lang="css">
	
	/* 遮罩层 */
	.offcanvas-container {
		width: 100%;
		height: 100vh;
		/* background-color: #0056B3; */
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}
	
	/* 菜单 */
	.offcanvas-menu {
		color: #06142D;
		position: fixed;
		z-index: 9999;
		top: 130upx;
		right: 0;
		width: 480upx;
		max-width: 100%;
		height: 80vh;
		margin-left: auto;
		padding: 80upx;
		transition: all 0.6s;
		transform: translateX(100%);
		background-color: #F1F1F1;
		background-image: linear-gradient(to bottom, #F1F1F1 0%, #F2F8FF 100%);
		box-shadow: -5px 0 15px rgba(0, 0, 0, 0.16);
	}

	.offcanvas-menu.active {
		transform: translateX(0);
	}

	/* 头像区域 */
	.text-center {
		text-align: center !important;
	}

	.space-mb--10 {
		margin-bottom: 20upx;
	}

	.profile-card__image .image-fluid {
		border-radius: 50%;
		vertical-align: middle;
		border-style: none;
		max-width: 50%;
		height: auto;
	}

	.profile-card__content view {
		font-weight: 500;
	}

	.profile-card__content view text {
		font-size: 24upx;
		font-weight: 400;
		display: block;
	}

	/* 列表 */
	.space-mt--40 {
		margin-top: 80upx;
	}

	.offcanvas-navigation {
		overflow-y: scroll;
		/* height: 800upx; */
		margin: 0 -80upx;
		padding: 0 80upx;
	}

	.offcanvas-navigation view:nth-child(1) {
		border-top: 4upx solid #FFFFFF;
	}

	.offcanvas-navigation view {
		display: flex;
		align-items: center;
		padding: 24upx 20upx 24upx 60upx;
		border-bottom: 4upx solid #FFFFFF;
	}

	.offcanvas-navigation view image {
		margin: 0 15px 0 0;
		width: 28upx;
		height: 28upx;
		vertical-align: middle;
	}
</style>
